(function() {
    //店铺数据请求
    fetch('http://chst.vip:1234/api/getgsshop').then(body => body.json()).then(res => {
        let result = res.result;
        // console.log(result);
        let shopStr = `
        `;
        result.forEach(item => {
            shopStr += `
            <li date-shopId="${item.shopId}">${item.shopName}</li>
            `
        });
        $('.shop').html(shopStr)
    });
    //区域数据请求
    fetch('http://chst.vip:1234/api/getgsshoparea').then(body => body.json()).then(res => {
        let result = res.result;
        // console.log(result);
        let areaStr = `
        `;
        result.forEach(item => {
            areaStr += `
            <li date-areaId="${item.areaId}">${item.areaName}</li>
            `
        });
        $('.area').html(areaStr)
    });
    //Tab栏事件
    let shopId = 0;
    let areaId = 0;
    getPro(shopId, areaId);
    $('.cityNav').on('click', 'li', function() {
        $('.cityLis ul').eq($(this).index()).stop().slideToggle(500).siblings().stop().slideUp(100);
    });

    $('.cityLis').on('click', 'li', function() {
        if ($(this).attr('date-shopId')) {
            shopId = $(this).attr('date-shopId');
        } else if ($(this).attr('date-areaId')) {
            areaId = $(this).attr('date-areaId');
        };
        getPro(shopId, areaId);
    });

    function getPro(shopId = 0, areaId = 0) {
        fetch('http://chst.vip:1234/api/getgsproduct?shopid=' + shopId + '&areaid=' + areaId).then(body => body.json()).then(res => {
            let result = res.result;
            console.log(result);
            let proStr = '';
            result.forEach(item => {
                proStr += `
                <li date-productId="${item.productId}">
                    <a href="#">
                        <div class="img">
                            <img src="${item.productImg}" alt="">
                        </div>
                        <div class="cent">
                            <h3>${item.productName}</h3>
                            <span class="price">${item.productPrice}</span>
                        </div>
                    </a>
                </li>
                `;
            });
            $('.pros ul').html(proStr);
        });
    }
})()